import React from 'react';
import './index.less';

function Button(props: any){
    const { text } = props;
    return <div className="c-container button">{text}</div>
}

function Input(props: any){
    const { placeholder } = props;
    return <input className="c-container input" placeholder={placeholder} />
}

function FlexColumn(props: any){
    const {columnSetting = [], settings = {}} = props;
    return <div className="c-container flex-column" style={{alignItems: settings.alignItem}}>
        {columnSetting.map((itemSetting: any, i: number) => {
            const {flexScale = null, child = ''} = itemSetting;
            const itemStyle = {} as any;
            +flexScale && (itemStyle.flex = +flexScale);
            return (<div key={i} style={itemStyle} className='flex-column-item'>
                {child}
            </div>);
        })}
    </div>;
}

const exports = {
    Button,
    Input,
    FlexColumn,
};

export default exports;
